<template>
  <div ref="buttomRadar" />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Ringchart',
  data() {
    return {
      totalweight: 82315,
      detailweight: [23421, 16263, 22163, 22163, 22163]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.buttomRadar)

      const option = {
        title: [
          {
            text: this.totalweight + '吨',
            top: '10%',
            textAlign: 'center',
            left: '18%',
            textStyle: {
              color: '#8FC889',
              fontSize: 24,
              fontWeight: '400'
            }
          }, {
            text: '专项分流总量',
            top: '25%',
            textAlign: 'center',
            left: '18%',
            textStyle: {
              color: '#000',
              fontSize: 15,
              fontWeight: '400'
            }
          }, {
            text: '装修垃圾' + '    ' + this.detailweight[0] + '吨',
            top: '45%',
            textAlign: 'center',
            left: '18%',
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontWeight: '400'
            }
          }, {
            text: '大件垃圾' + '    ' + this.detailweight[1] + '吨',
            top: '55%',
            textAlign: 'center',
            left: '18%',
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontWeight: '400'
            }
          }, {
            text: '汽车行业' + '    ' + this.detailweight[2] + '吨',
            top: '65%',
            textAlign: 'center',
            left: '18%',
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontWeight: '400'
            }
          }, {
            text: '电子垃圾' + '    ' + this.detailweight[3] + '吨',
            top: '75%',
            textAlign: 'center',
            left: '18%',
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontWeight: '400'
            }
          }, {
            text: '绿化垃圾' + '    ' + this.detailweight[4] + '吨',
            top: '85%',
            textAlign: 'center',
            left: '18%',
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontWeight: '400'
            }
          }

        ],
        color: ['#3BB8FF', '#7460EE'],
        tooltip: {
          show: false
        },
        radar: {
          radius: '70%',
          center: ['65%', '50%'],
          name: {
            textStyle: {
              fontSize: 12,
              color: '#fff'
              // borderRadius: 3,
              // padding: [3, 5]
            }
          },
          indicator: [

            { name: '装修垃圾', max: 30000 },
            { name: '大件垃圾', max: 30000 },
            { name: '汽车行业', max: 30000 },
            { name: '电子垃圾', max: 30000 },

            { name: '绿化垃圾', max: 30000 }
          ],
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#0885a0',
              width: 1,
              type: 'solid'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(249, 208, 0, 0)'
            }
          }
        },
        series: [{
          type: 'radar',
          symbol: 'none',
          data: [
            {
              value: [18000, 20000, 25000, 20000, 25000],
              // name : '时间1',
              lineStyle: {
                width: 2,
                color: '#f9d000'
              },
              areaStyle: {
                // color: 'rgba(249, 208, 0, 0.502)'
                normal: { // 单项区域填充样式
                  color: {
                    type: 'linear',
                    x: 0, // 右
                    y: 0, // 下
                    x2: 1, // 左
                    y2: 1, // 上
                    colorStops: [{
                      offset: 0,
                      color: '#178B01'
                    }, {
                      offset: 1,
                      color: 'rgba(19,93,20,0.8)'
                    }],
                    globalCoord: false
                  },
                  opacity: 1 // 区域透明度
                }
              }
            }
          ]
        }]
      }

      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>
<style scoped >

</style>
